<template>
    <div class="jingxuan">
        <!--        查询用户-->
        <span class="from">
            <el-form :inline="true" :model="context" class="demo-form-inline">
            <el-form-item label="用户名:">
                <el-input v-model="context.name"></el-input>
            </el-form-item>
                <!--                //日期-->
                <!--<el-date-picker
                        v-model="value1"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>-->
                <!--                //搜索日期-->
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
        </span>
        <!--        新增用户-->
        <div style="margin-bottom: 30px">
            <el-button type="text" @click="resetData" :style="{'background-color':'#409EFF',color:'#fff',textAlign:'center',width:'100px',padding:'10px 0'}">
                <span>新增用户</span>
            </el-button>
            <!--            新增用户-->
            <el-dialog :title="title" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="用户名" :label-width="formLabelWidth">
                        <el-input v-model="form.userName" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="密码" :label-width="formLabelWidth">
                        <el-input v-model="form.password" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="昵称" :label-width="formLabelWidth">
                        <el-input v-model="form.nickName" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="邮箱" :label-width="formLabelWidth">
                        <el-input v-model="form.email" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="手机号" :label-width="formLabelWidth">
                        <el-input v-model="form.phone" autocomplete="off"></el-input>
                    </el-form-item>


                    <el-form-item label="角色" :label-width="formLabelWidth">
                        <template>
                            <el-select autocomplete="off" v-model="roleValue" placeholder="请选择">
<!--                                @change="choseRole(roleValue)"-->
                                <el-option
                                        v-for="item in users"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                        <!--                        <el-input v-model="form.type_id" autocomplete="off"></el-input>-->
                    </el-form-item>

                    <!--<el-dialog :title="title" :visible.sync="dialogFormVisible">
                        &lt;!&ndash;            新增咨询师&ndash;&gt;
                        <el-form :model="teacher">
                            <el-form-item label="咨询师名" :label-width="formLabelWidth">
                                <el-input v-model="teacher.name" autocomplete="off"></el-input>
                            </el-form-item>

                            <el-form-item label="咨询师头像" :label-width="formLabelWidth">
                                <el-input v-model="teacher.image" autocomplete="off"></el-input>
                            </el-form-item>

                            <el-form-item label="所属地址" :label-width="formLabelWidth">
                                <el-input v-model="teacher.address" autocomplete="off"></el-input>
                            </el-form-item>

                            <el-form-item label="个人简介" :label-width="formLabelWidth">
                                <el-input v-model="teacher.intro" autocomplete="off"></el-input>
                            </el-form-item>

                            <el-form-item label="是否认证" :label-width="formLabelWidth">
                                <el-input v-model="teacher.authentication" autocomplete="off"></el-input>
                            </el-form-item>


                            <el-form-item label="咨询师等级" :label-width="formLabelWidth">
                                <template>
                                    <el-select autocomplete="off" v-model="levelValue" placeholder="请选择">
                                        <el-option
                                                v-for="item in levels"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </template>
                                &lt;!&ndash;                        <el-input v-model="form.type_id" autocomplete="off"></el-input>&ndash;&gt;
                            </el-form-item>

                        </el-form>
                    </el-dialog>-->

                </el-form>

                <!--            新增咨询师-->
                <el-form :model="teacher" :style="{visibility:visibleT,height:hgh}">
                    <el-form-item label="咨询师名" :label-width="formLabelWidth">
                        <el-input v-model="teacher.name" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="咨询师头像" :label-width="formLabelWidth">
                        <el-input v-model="teacher.image" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="所属地址" :label-width="formLabelWidth">
                        <el-input v-model="teacher.address" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="个人简介" :label-width="formLabelWidth">
                        <el-input v-model="teacher.intro" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="是否认证" :label-width="formLabelWidth">
                        <el-input v-model="teacher.authentication" autocomplete="off"></el-input>
                    </el-form-item>


                    <el-form-item label="咨询师等级" :label-width="formLabelWidth">
                        <template>
                            <el-select autocomplete="off" v-model="levelValue" placeholder="请选择">
                                <el-option
                                        v-for="item in levels"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                        <!--                        <el-input v-model="form.type_id" autocomplete="off"></el-input>-->
                    </el-form-item>

                </el-form>
                <!-------------------------------------------------------------------------------------------------->
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible=false">取 消</el-button>
                    <el-button type="primary" @click="saveDate">保 存</el-button>
                </div>
                <!--                ---------------------------------------------------------------------------------->
            </el-dialog>
        </div>

        <!--        用户列表展示-->
        <template>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%"
                    :header-cell-style="{'background-color':'#409EFF',color:'#fff',textAlign:'center'}"
                    :cell-style="{'text-align':'center'}">

                <el-table-column
                        prop="id"
                        label="ID">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户名">
                </el-table-column>
                <el-table-column
                        prop="password"
                        label="密码">
                </el-table-column>
                <el-table-column
                        prop="nickName"
                        label="昵称">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="电话">
                </el-table-column>
                <el-table-column
                        prop="role"
                        label="角色">
                </el-table-column>

                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.$index)" type="text" size="small">编辑</el-button>
                        <el-button
                                @click.native.prevent="deleteRow(scope.$index)"
                                type="text"
                                size="small">
                            移除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>

        <!--        删除操作-->
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
            <span>此操作将永久删除该文件是否继续</span>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="deleteData">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "UserAdmin",
        data(){
            return{
                //搜索所运用的属性
                value1: '',
                context: {
                    name: '',
                    region: ''
                },
                form:{
                    id:'',
                    userName:'',
                    password:'',
                    nickName:'',
                    email:'',
                    phone:'',
                    role:'',
                },
                teacher:{
                    name:'',
                    image:'',
                    address:'',
                    intro:'',
                    authentication:'',
                    levelId:'',
                },
                tableData: [],
                users:[
                    {
                        value:2,
                        label:'咨询师',
                    },
                    {
                        value:3,
                        label:'普通用户',
                    }
                ],
                levels:[
                    {
                        value:1,
                        label:'初级咨询师',
                    },
                    {
                        value:2,
                        label:'中级咨询师',
                    },
                    {
                        value:3,
                        label:'高级咨询师',
                    }
                ],
                dialogFormVisible: false,
                dialogTableVisible: false,
                dialogTableVisible2:false,
                dialogVisible: false,
                formLabelWidth: '120px',
                title:'',
                state:'',
                roleValue:'',
                visibleT:'hidden',
                hgh:0,
                levelValue:''
            }
        },
        created() {
            this.refresh();
            // this.getUser();
        },
        methods:{
            //获取时间
            getDateString(date){
                let yy = date.getFullYear();
                let mm = date.getMonth()+1;
                let dd = date.getDate();
                let hh = date.getHours();
                let mf = date.getMinutes()<10 ? '0'+date.getMinutes() : date.getMinutes();
                let ss = date.getSeconds()<10 ? '0'+date.getSeconds() : date.getSeconds();
                let str = yy + "-" + mm + "-" + dd +" " + hh + ":" + mf + ":" + ss;
                return str;
            },
            //查找用户
            onSubmit(){
                this.axios.get("/userbfb/getLikeNormalConsultantUser",{
                    params:{
                        message:this.context.name
                    }
                }).then(res=>{
                    console.log(res)
                    this.tableData = res.data.data
                })
            },
            //获取所有文章列表
            refresh(){
                this.axios.get("/userbfb/getAllNormalConsultantUser").then(res=>{
                    console.log(res);
                    this.tableData = res.data.data;
                })
            },
            //获取所有用户角色列表
            getUser(){
                this.axios.get("/userRole/getUserRole").then(res=>{
                    console.log(res)
                    this.users = res.data.data
                })
            },
            //新增数据刷新
            resetData(){
                this.title = '新增用户';
                this.state = 1;
                this.dialogFormVisible = true;
                this.form.userName = '';
                this.form.password = '';
                this.form.nickName = '';
                this.form.email = '';
                this.form.phone = '';
                this.form.role = '';
                //咨询师属性回空
                this.teacher.name = '';
                this.teacher.image = '';
                this.teacher.address = '';
                this.teacher.intro = '';
                this.teacher.authentication = '';
                this.teacher.levelId = '';
            },
            //新增数据
            insertData(){
                this.axios.post("/userbfb/insertNormalConsultantUser",{
                    username:this.form.userName,
                    password:this.form.password,
                    nickname:this.form.nickName,
                    email:this.form.email,
                    phone:this.form.phone,
                    role:this.roleValue,
                }).then(res=>{
                    console.log(res)
                })
            },
            //选择咨询师/普通用户
            /*choseRole(roleValue){
                console.log(roleValue)
                if (roleValue === 2){
                    this.hgh = '';
                    this.visibleT = 'visible'
                }else {
                    this.hgh = 0;
                    this.visibleT = 'hidden'
                }
            },*/

            //保存数据
            saveDate(){
                if (this.state === 1){
                    this.insertData();
                    setTimeout(()=>{this.refresh()},500);
                }
                if (this.state === 2){
                    this.updateDate();
                    setTimeout(()=>{this.refresh()},500);
                }
                this.dialogFormVisible = false;

            },
            //修改数据显示
             handleClick(index) {
                this.title = '编辑评价';
                this.state = 2;
                this.dialogFormVisible = true;
                this.form.id = this.tableData[index].id;
                this.form.userName = this.tableData[index].username;
                this.form.password = this.tableData[index].password;
                this.form.nickName = this.tableData[index].nickName;
                this.form.email = this.tableData[index].email;
                this.form.phone = this.tableData[index].phone;
                this.form.role = this.roleValue;
            },
            //修改数据
            updateDate(){
                this.form.role =
                this.axios.post("/userbfb/updateNormalConsultantUser",{
                    id:this.form.id,
                    username:this.form.userName,
                    password:this.form.password,
                    nickname:this.form.nickName,
                    email:this.form.email,
                    phone:this.form.phone,
                    role:this.roleValue,
                }).then(res=>{
                    console.log(res)
                    setTimeout(()=>{this.refresh()},500);
                })
            },
            //删除数据
            deleteRow(index){
                this.dialogVisible = true;
                this.form.id = this.tableData[index].id;
                console.log(this.form.id);
            },
            deleteData(){
                this.dialogVisible = false;
                this.axios.delete("/userbfb/deleteNormalConsultantUser",{
                    params:{
                        id:this.form.id
                    }
                    }
                ).then(res=>{
                    console.log(res)
                    setTimeout(()=>{this.refresh()},500)
                })
            }
        }
    }
</script>

<style scoped>


</style>